<template>
  <div class="wrapper">
    <my-nav-bar
            fixed
            title="键盘，兄弟"
            left-text="返回"
            right-text="按钮"
            @click-left="onClickLeft"
            @click-right="onClickRight"
        ></my-nav-bar>
    <div class="content">
      <input type="text" v-model="number">
      <h2 class="title">基础用法</h2>
      <div class="btn-box">
        <my-button type="primary" plain @touchstart.native.stop="onTouchstart('default')">弹出默认键盘</my-button>
      </div>

      <h2 class="title">自定义用法</h2>
      <div class="btn-box">
        <my-button type="primary" plain @touchstart.native.stop="onTouchstart('custom')">弹出自定义键盘</my-button>
      </div>

      <h2 class="title">密码键盘</h2>
      <div class="btn-box">
        <my-button type="primary" plain @touchstart.native.stop="onTouchstart('keyBoard')">弹出密码键盘</my-button>
      </div>
    </div>


    <pass-keyboard v-if="showKB" @cancel=cancel @done="done"></pass-keyboard>

    <my-number-keyboard
      :show="show1"
      :theme="theme"
      :title="title"
      close-button-text="完成"
      extra-key="."
      @blur="onBlur"
      @input="onInput"
      @delete="onDelete">
    </my-number-keyboard>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show1: false,
      theme: 'default',
      title: '默认键盘',
      number: null,
      showKB:false
    }
  },

  methods: {
    cancel(){
        setTimeout(()=>{
           this.showKB=false
        
        },200)
    },
    done(value){
       console.log(value)
    },
    onClickLeft() {
      this.$router.go(-1)
    },

    onClickRight() {
      console.log("right");
    },

    onTouchstart(theme) {
      this.theme = theme
      // this.title = theme === 'default' ? '默认键盘' : '自定义键盘'

      if(theme === 'default') {
        this.title='默认键盘'
         this.show1 = true
      }
      if(theme === 'custom') {
        this.title='自定义键盘'
         this.show1 = true
      }
      if(theme === 'keyBoard') {
        this.title='密码键盘'
        //  this.show1 = true
        this.showKB=true
        // alert(6)
      }

     
    },

    onBlur() {
      this.show1 = false
    },

    onInput(text) {
        this.number = text
      console.log('text', text)
    },

    onDelete() {
      console.log('delete')
    }
  }
}
</script>

<style lang="less" scoped>
.content{
    margin-top: 45px;
}
</style>
